<template>
    <el-dialog :title="title" :visible="formVisible" :close-on-click-modal="false" width="730px" append-to-body @close="onClosed">
        <!--        <hr/>-->
        <!--        formData:<pre>{{formData}}</pre>-->
        <el-form ref="updateForm" size="mini" label-width="100px" :model="formData" :disabled="loading" v-loading="loading" :rules="formDataRules">
<#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
    <#list classInfo.fieldList as fieldItem >
        <#if fieldItem.fieldName != "id">
            <el-form-item label="${fieldItem.fieldComment}：" prop="${fieldItem.fieldName}">
                <el-input v-model="formData.${fieldItem.fieldName}" placeholder="${fieldItem.fieldComment}"></el-input>
            </el-form-item>
        </#if>
    </#list>
</#if>
            <el-form-item align="center" label-width="0">
                <el-badge :is-dot="isDirty">
                    <el-button type="primary" @click="onSave" :loading="saving">确定</el-button>
                </el-badge>
                <el-button type="primary" @click="loadData" :loading="loading">重置</el-button>
                <el-button @click="onClosed" :disabled="loading">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
    import lodash from 'lodash'

    export default {
        components: {},
        props: {
            formVisible: {
                type: Boolean,
                default: false,
            },
            id: {
                type: Number,
                default: null,
            },
            isCloneOperation: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                formDataRules: {
                },
                visible: false,
                loading: false,
                saving: false,
                formData: {
            <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                <#list classInfo.fieldList as fieldItem >
                    ${fieldItem.fieldName}: null,
                </#list>
            </#if>
                },
                defaultFormData: {
            <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                <#list classInfo.fieldList as fieldItem >
                    ${fieldItem.fieldName}: null,
                </#list>
            </#if>
                },
                backupFormData: {},
            }
        },
        computed: {
            isEdit() {
                return !this.isCloneOperation && !!this.id
            },
            title() {
                let entityName = 'TODO'
                if (this.isCloneOperation) {
                    return '复制' + entityName
                }
                return (this.isEdit ? '编辑' : '新增') + entityName
            },
            paramObj() {
                return {
                    formVisible: this.formVisible,
                    id: this.id,
                    isCloneOperation: this.isCloneOperation,
                }
            },
            isDirty() {
                return JSON.stringify(this.formData) != JSON.stringify(this.backupFormData)
            },
        },
        methods: {
            onSave() {
                this.saving = true
                this.$refs.updateForm.validate(valid => {
                    this.saving = false
                    if (valid) {
                        this.save()
                    }
                })
            },
            async save() {
                this.saving = true
                let param = lodash.cloneDeep(this.formData)
                let response = await this.$todoService.update(param)
                // console.log('save response:', response)
                if (response.errorNo == 0) {
                    this.onClosed()
                    this.$message.success('操作成功')
                    this.$emit('success', response)
                } else {
                    this.$message.error('操作失败')
                }
                this.saving = false
            },
            onClosed() {
                this.$emit('update:formVisible', false)
            },
            async loadData() {
                this.loading = true
                if (this.id) {
                    let response = await this.$todoService.list({id: this.id})
                    let entity = response.result.content[0]
                    this.formData.id = this.isCloneOperation ? null : entity.id
        <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
            <#list classInfo.fieldList as fieldItem >
                <#if fieldItem.fieldName != "id">
                    this.formData.${fieldItem.fieldName} = entity.${fieldItem.fieldName}
                </#if>
            </#list>
        </#if>
                } else {
                    this.formData = lodash.cloneDeep(this.defaultFormData)
                }

                this.backupFormData = lodash.cloneDeep(this.formData)
                if (this.$refs.updateForm) {
                    this.$refs.updateForm.clearValidate()
                }
                this.loading = false
            },
        },
        watch: {
            paramObj: {
                immediate: true,
                deep: true,
                handler(value) {
                    this.visible = this.formVisible
                    if (this.visible) {
                        this.loadData()
                    }
                }
            },
        },
        mounted() {
        }
    }
</script>

<style>

</style>
